<!--
*@Author: QWP
*@Description: 自定义日历组件
*@Date: 2024-07-14 20:15:13
-->
<template>
  <a-layout class="u-calendar-week s-bg-white f-padding-tb10"
    v-bind="$attrs">
    <a-layout-header style="background-color: #fff; padding: 4px 0; height: auto; line-height: unset">
      <a-row justify="space-between">
        <slot name="headerBefore"></slot>
        <a-col flex="1">
          <a-row :justify="headerEndJustify || 'end'">
            <a-date-picker v-model:value="calendarValue"
              :allowClear="false" 
              :bordered="false" 
              :readonly="true" 
              class="u-calendar-date-picker"
              id="u-calendar-date-picker"
              @change="initDayas()">
              <template #suffixIcon>
                <u-icon-font type="icon-xiangzuoqiehuan" 
                  style="transform: rotate(-90deg); padding-left: 4px;">
                </u-icon-font>
              </template>
            </a-date-picker>
            <a-radio-group v-model:value="calendarType1"
              v-if="showModes">
              <a-radio-button value="week" size="small" v-if="modes.includes('week')">周</a-radio-button>
              <a-radio-button value="month" v-if="modes.includes('month')">月</a-radio-button>
              <a-radio-button value="year" v-if="modes.includes('year')">年</a-radio-button>
            </a-radio-group>
          </a-row>
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout-content>
      <template v-if="calendarType1 == 'week'">
        <a-row>
          <a-list :grid="{ column: 7 }" :data-source="weeks"
            class="f-w-100">
            <template #renderItem="{ item }">
              <div class="u-calendar-header-cell">{{ item }}</div>
            </template>
          </a-list>
        </a-row>
        <a-list :grid="{ column: 7 }" :data-source="days"
          class="f-w-100">
          <template #renderItem="{ item }">
            <div class="u-calendar-body-cell f-flex-row"
              @click="weekCalendarClick(item)">
              <div
                :class="{
                  'u-calendar-cell-current': dayjs(item.date).format('YYYY-MM-DD') == dayjs(calendarValue).format('YYYY-MM-DD') ,
                  'u-have-schedule-action': haveIsAction(item.date)
                }">
                {{ dayjs(item.date).format('DD') }}
              </div>
            </div>
          </template>
        </a-list>
      </template>
      <template v-else>
        <a-calendar v-model:value="calendarValue" 
          :fullscreen="false"
          :mode="calendarType"
          :dateFullCellRender="dateFullCellRender"
          @select="calendarSelect">
          <template #headerRender></template>
        </a-calendar>
      </template>
    </a-layout-content>
  </a-layout>
  <a-row></a-row>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, h } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import dayjs, { Dayjs } from 'dayjs';
defineOptions({
  name: 'u-calendar-week'
})

interface Props {
  data?: any[],
  dataProps?: object,
  modes?: string[],
  mode?: string,
  showModes?: boolean,
  headerEndJustify?: string,
  date: Dayjs, // week， month,  year  
  calendarType: string, // week， month,  year  
  readPoint?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'month',
  showModes: true,
  modes: ['week', 'month', 'year'],
  calendarType: 'month',
  dataProps: { value: 'date' }
})

const emits = defineEmits(['update:calendarType',  'update:date', 'select'])

// 日历头部
const weeks = ['一', '二', '三', '四', '五', '六', '日']

// 本周日期
let days = reactive<Array<any>>([])

// 当前日期
const calendarValue = ref<Dayjs>(props.date);

const calendarType1 = ref<string>(props.calendarType)

onMounted(() => {
  calendarType1.value = props.mode;
  calendarValue.value = dayjs(props.date)
  initDayas('init')
})

// 设置本周的日子
const initDayas = (type?: string) => {
  let day = dayjs(calendarValue.value).day()
  let firstDay = dayjs(calendarValue.value).subtract(day == 0 ? 6 : day - 1, 'day')
  days.splice(0, days.length)
  for(let i = 0; i < 7; i++) {
    days.push({ date: firstDay.add(i, 'day').format('YYYY-MM-DD') })
  }
  if(type != 'init') {
    emits('update:date', calendarValue.value)
    emits('select', calendarValue.value)
  }
}

// ant日历面板切换
const onPanelChange = (value, mode) => {
  calendarValue.value = value;
}

// 周日历点击事件
const weekCalendarClick = (item) => {
  calendarValue.value = dayjs(item.date)
  emits('update:date', item.date)
  emits('select', item.date)
}

const calendarSelect = (date) => {
  emits('update:date', date)
  emits('select', date.format('YYYY-MM-DD').toString())
}

// 渲染日历的单元格
const dateFullCellRender = (current: dayjs) => {
  let date = current.current.format('YYYY-MM-DD')
  let day = current.current.format('DD')
  const { value } = props.dataProps
  if(props.readPoint == true) {
    let isExistData = (props.data || []).some(item => dayjs(item[value]).format('YYYY-MM-DD') == date);
    if(isExistData) {
      return h('div',{ class: 'u-have-schedule-action'  }, day )
    }
  }
  return h('div', day)
}

// 渲染周日历的日程提醒
const haveIsAction = (date) => {
  if(props.readPoint != true) {
    return false
  }
  const { value } = props.dataProps
  return (props.data || []).some(item => dayjs(item[value]).format('YYYY-MM-DD') == date)
}

watch(() => calendarType1.value, (nval, oval) => {
  emits('update:calendarType', nval)
})

</script>

<style lang='scss'>
.u-calendar-week {
  .u-calendar-header-cell {
    height: auto;
    padding: 6px 4px;
    text-align: center;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.88);
    vertical-align: middle;
  }
  .u-calendar-body-cell {
    justify-content: center;
    color: rgba(0, 0, 0, 0.88);
    padding: 8px 4px;
    text-align: center;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.88);
    vertical-align: middle;
    cursor: pointer;
    div {
      position: relative;
      width: 30px;
      height: 24px;
      line-height: 24px;
    }
  }
  .u-calendar-cell-current {
    color: #fff;
    background: #1890FF;
    border-radius: 8px;
  }
  .u-calendar-date-picker {
    width: 118px !important;
    .ant-picker-suffix {
      // display: none;
    }
  }
  .ant-picker-cell-selected {
    color: #1890ff;
    div {
      background: #1677ff;
      color: #fff;
      border-radius: 4px;
    }
  }
  .ant-picker-cell {
    div { 
      position: relative;
      display: inline-block;
      min-width: 24px;
      height: 24px;
      line-height: 24px;
    }
  }
  .u-have-schedule-action {
    &::after {
      content: "";
      position: absolute;
      top: -4px;
      right: -4px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ff4d4f 
    }
  }
}
</style>